<template>
  <div style="height: 90%; width: 100%">
    <div id="customerType" style="height: 100%; width: 100%"></div>
  </div>
</template>

 <script>
export default {
  name: "customerType",
  props: {
    chartsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    chartsData(val) {
      this.getPie(val);
    },
  },
  methods: {
    getPie(val) {
      let arr1 = val.bngz.sort()
      let arr2 = val.bnZq.sort()
      let arr3 = val.wngz.sort()
      let arr4 = val.wnZq.sort()
      let arr = []
      arr.push(arr1[0])
      arr.push(arr2[0])
      arr.push(arr3[0])
      arr.push(arr4[0])
      arr = arr.sort()
      var myChart = this.$echarts.init(document.getElementById("customerType"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
            data: ['2021年公众', '2021年政企', '2020年公众', '2020年政企'],
            bottom: 0
        },
        grid: {
          bottom: "50px",
          containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: val.time
        },
        yAxis: {
            min: arr[0] - Number(2 + ('e' + (arr[0].length - 2))),
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                //y轴刻度线
                show: false,
            },
            axisLine: {
                //y轴
                show: false,
            },
        },
        series: [
          {
            name: "2021年公众",
            type: "line",
            data: val.bngz,
            itemStyle: {
              normal: {
                color: "#9BBB59",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#948B22",
                  },
                },
              },
            },
          },
          {
            name: "2021年政企",
            type: "line",
            data: val.bnZq,
            itemStyle: {
              normal: {
                color: "#7F64A2",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#FFC000",
                  },
                },
              },
            },
          },
          {
            name: "2020年公众",
            type: "line",
            data: val.wngz,
            itemStyle: {
              normal: {
                color: "#4F80BD",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#0070C0",
                  },
                },
              },
            },
          },
          {
            name: "2020年政企",
            type: "line",
            data: val.wnZq,
            itemStyle: {
              normal: {
                color: "#C0504D",
                label: {
                  show: true,
                  position: "bottom",
                  textStyle: {
                    color: "#C0504D",
                  },
                },
              },
            },
          }
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

 <style>
</style>
